<template>
  <!-- 奖品兑换 -->
  <view class="practiceList flex flex-column">
    <view style="padding: 10px 16px;">
      <Navbar :tabList="navList" :selectVal="navbarVal" @updateVal="navbarClick" />
    </view>
    <view class="f_1 award">
      <empty v-if="!list.length"></empty>
      <scroll-view scroll-y style="height: 100%" @scrolltolower="scrolltolower" v-else>
        <view v-for="(item, index) in list" :key="index" class="item flex">
          <view class="fs_0 award-img">
            <image :src="item.photoUrl ? item.photoUrl : photoUrl" />
            <text class="vip" v-if="item.isVip">VIP</text>
          </view>
          <view class="info f_1 flex flex-column between">
            <image v-if="navbarVal == 3" class="coupons" src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/coupons.png" />
            <view class="flex between">
              <view class="flex award-title">
                <text>{{ item.nickName }}</text>
                <text>{{ item.phone }}</text>
              </view>
              <view class="award-btn" v-if="navbarVal == 1" @click="cashPrizeOpen(item.awardStudentUuid, item.exchangeWay)">兑奖</view>
              <view class="flex item-center" v-if="navbarVal == 2" @click="$refs.cashPrizeDetail.open(item)">详情<u-icon
                  name="arrow-right" :size="10"></u-icon>
              </view>
            </view>
            <view class="flex award-one">
              <text>获得奖项：{{ item.awardName }}</text>
            </view>
            <view class="flex between award-way">
              <view>兑奖方式：{{ item.exchangeWay == 1 ? '线上兑奖' : '线下兑奖' }}</view>
              <view class="flex" v-if="navbarVal == 1" @click="$refs.cashPrizeDetail.open(item)">详情<u-icon
                  name="arrow-right" :size="10"></u-icon></view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <CashPrize ref="cashPrize"></CashPrize>
    <CashPrizeDetail ref="cashPrizeDetail"></CashPrizeDetail>
  </view>
</template>

<script>
import _ from 'lodash';
import Empty from "@/improve/components/common/Empty.vue";
import Navbar from "@/improve/components/Navbar.vue";
import { pageUpgPracticeAwardStudent } from "@/improve/services"
import CashPrize from "./CashPrize.vue";
import CashPrizeDetail from "./CashPrizeDetail.vue";
import photoUrl from '@/static/images/smallTx.svg'

export default {
  name: "practiceList",
  components: { Navbar, Empty, CashPrize, CashPrizeDetail },
  data() {
    return {
      photoUrl,
      navList: [
        { text: "未兑奖", value: 0 },
        { text: "兑奖申请", value: 1 },
        { text: "已兑奖", value: 2 },
      ],
      navbarVal: 0,
      list: [],
      pageNo: 1,
      pageTotal: 1,
      upgPracticeUuid: ''
    }
  },
  onLoad(options) {
    this.upgPracticeUuid = options.upgPracticeUuid
  },
  onShow() {
    this.getList()
  },
  methods: {
    cashPrizeOpen(awardStudentUuid, exchangeWay) {
      this.$refs.cashPrize.open(awardStudentUuid, exchangeWay);
    },
    navbarClick(val) {
      if (val === this.navbarVal) return
      this.navbarVal = val
      this.list = []
      this.pageNo = 1
      this.getList()
    },
    scrolltolower() {
      if (this.pageNo < this.pageTotal) {
        this.pageNo++;
        this.getList()
      }
    },
    getList: _.debounce(async function () {
      const res = await pageUpgPracticeAwardStudent({
        upgPracticeUuid: this.upgPracticeUuid,
        pageNo: this.pageNo,
        pageSize: 10,
        type: this.navbarVal
      })
      this.list = this.pageNo === 1 ? res.datas : [...this.list, ...res.datas]
    }),
  }
}
</script>
<style scoped lang="scss">
.practiceList {
  height: calc(100vh - 10px - env(safe-area-inset-bottom) - 16px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background-color: #FFFFFF;

  empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .award {
    border-top: 1px solid #F2F2F2;

    &-btn {
      background-color: #37B874;
      color: #fff;
      font-size: 14px;
      padding: 3px 16px 2px;
      border-radius: 100px;
    }

    &-img {
      position: relative;

      image {
        width: 70px;
        height: 70px;
        border-radius: 100px;
        background-size: cover;
        margin-right: 10px;
      }

      .vip {
        background-color: #EED682;
        padding: 0 8px;
        color: #A86C12;
        font-size: 10px;
        position: absolute;
        bottom: 2px;
        left: 50%;
        margin-left: -23px;
        border-radius: 10px;
      }

    }

    &-title {
      font-size: 16px;
      color: #333;
      font-size: 500;

      text:nth-child(2) {
        font-weight: 400;
        margin-left: 20px;
      }
    }

    &-one {
      font-size: 14px;
      color: #333;
    }

    &-way {
      font-size: 12px;
      color: #999;
    }
  }

  .item {
    border-radius: 12px;
    border-bottom: 1px solid #F2F2F2;
    padding: 16px;

    .info {
      color: #666666;
      font-size: 12px;
      position: relative;
    }

    .coupons {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 66px;
      height: 52px;
    }
  }
}
</style>